<template>
  <div class="w-full h-full flex flex-wrap p-5">
    <el-button
      class="ml-3"
      v-for="(button, index) in buttons"
      :key="index"
      :type="button.type"
      @click="buttonsEvent(button)"
    >
      {{ button.title }}
    </el-button>
    <el-button class="ml-3" @click="logout"> 退出登录 </el-button>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { Buttons } from "@/types/home";
import { loginout } from "@/utils/outLogin";

export default defineComponent({
  setup() {
    const router = useRouter();
    const route = useRoute();
    const state = reactive({
      buttons: [] as Buttons[],
      buttonsEvent: (val: Buttons) => {
        router.push(val.path);
      },
      logout: () => {
        loginout();
      },
    });
    onMounted(() => {
      router?.options?.routes?.forEach((e) => {
        if (e.meta?.show) {
          state.buttons?.push({
            path: e.path,
            title: e.meta?.title,
            type: e.meta?.type,
          } as Buttons);
        }
      });
    });
    return {
      ...toRefs(state),
    };
  },
});
</script>

<style scoped></style>
